<template>
	<div class="home">
		<Nav activeIndex="HomeView"></Nav>
		<div class="hero">
			<div class="container">
				<!-- <h1>欢迎您来到我的网站</h1> -->
				<h1 id="text" ref="text">开始...</h1>
				<p>{{userinfo.username}}</p>
			</div>
		</div>
		<section class="container content overflow">
			<div class="left">
				<List activeIndex="HomeView"></List>
			</div>
			<div class="right">
				<div class="card-content">
					<h3 class="card-title animated-bg animated-bg-text" id="title">{{userinfo.username}}个人卡片</h3>
					<p class="card-excerpt" id="excerpt">{{hitokototext}}</p>
					<div class="author">
						<div class="profile-img animated-bg" id="profile_img"><img :src="userinfo.userpic"
								style=" width: 100%; height: 100%;" />
						</div>
						<div class="author-info">
							<strong class="animated-bg animated-bg-text" id="name">{{userinfo.username}}</strong>
							<small class="animated-bg animated-bg-text"
								id="date">{{parseTimeNew(userinfo.create_time)}}</small>
						</div>
					</div>
				</div>
			</div>
		</section>
		<Footer></Footer>
	</div>
</template>

<script>
	import Nav from '../components/Nav.vue'
	import List from '../components/List.vue'
	import Footer from '../components/Footer.vue'
	import {
		mapState
	} from "vuex"
	export default {
		name: "HomeView",
		data() {
			return {
				blogname: "",
				blogavaimg: "./images/avatar1.jpg",
				idx: 0,
				text: '今天也是元气满满的一天',
				settimevalue: null,
				hitokototext: '好橘子',
				timetext: '2022/7/31'
			}
		},
		components: {
			Nav,
			List,
			Footer
		},
		computed: {
			...mapState(['userinfo'])
		},
		beforeDestroy() {
			clearTimeout(this.settimevalue);
		},

		mounted() {
			this.writeText();
			this.hitokotoEvent();
		},
		methods: {
			parseTimeNew(date) {
				var ndate = new Date(date)
				let type = 'yyyy-MM-dd'
				const o = {
					'M+': ndate.getMonth() + 1, // 月份
					'd+': ndate.getDate(), // 日
					'h+': ndate.getHours(), // 小时
					'm+': ndate.getMinutes(), // 分
					's+': ndate.getSeconds(), // 秒
					'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
					'S': ndate.getMilliseconds() // 毫秒
				}
				if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1
					.length))
				for (const k in o) {
					if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[
						k]) : (('00' + o[k]).substr(('' + o[k]).length)))
				}
				return type
			},
			writeText() {
				this.$refs.text.innerText = this.text.slice(0, this.idx);
				this.idx++;
				if (this.idx > this.text.length) {
					this.idx = 0;
				}
				if (this.settimevalue != null) {
					clearTimeout(this.settimevalue);
				}
				this.settimevalue = setTimeout(this.writeText, 300);
			},
			async hitokotoEvent() {
				let {
					data
				} = await this.$axios.get('https://v1.hitokoto.cn/');
				this.hitokototext = data.hitokoto;
			},
			// async getUserName() {
			// 	// let {
			// 	// 	data
			// 	// } = await this.$axios.post('/blog/users/sendCode', {
			// 	// 	phone: '1'
			// 	// });
			// 	let {
			// 		data
			// 	} = await this.$axios.get('/blog/users/userinfo?id=1');
			// 	console.log(data);
			// }
		}
	};
</script>

<style lang="less" scoped>
	.home {
		height: 100%;

		.container {
			max-width: 1200px;
			margin: 0 auto 10px;
			position: relative;
			top: 0px;
		}
	}




	.hero {
		margin: 0 auto 20px;
		background-image: url("@/assets/images/bg1.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom center;
		height: 887px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		text-align: center;
		z-index: -2;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: -1;
		}

		h1 {
			font-size: 46px;
			margin: -20px 0 20px;
			height: 61px;
		}

		p {
			font-size: 20px;
			letter-spacing: 1px;
		}
	}

	.content {

		h2,
		h3 {
			font-size: 150%;
			margin: 20px 0;
		}

		p {
			color: #555;
			line-height: 30px;
			letter-spacing: 2px;
		}
	}

	.left {
		float: left;
		min-height: 220px;
		width: calc(100% - 365px);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		margin: 5px 5px 72px 5px;
	}

	.right {
		float: right;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		overflow: hidden;
		width: 350px;
		margin: 5px 5px 0px 0px;

		.card-header {
			height: 200px;
		}

		.card-header img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.card-content {
			background-color: #fff;
			padding: 30px;
		}

		.card-title {
			height: 20px;
			margin: 0;
		}

		.card-excerpt {
			color: #777;
			margin: 10px 0 20px;
		}

		.author {
			display: flex;
		}

		.profile-img {
			border-radius: 50%;
			overflow: hidden;
			height: 40px;
			width: 40px;
		}

		.author-info small {
			color: #aaa;
			margin-top: 5px;
		}

		.author-info {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100px;
			margin-left: 10px;
		}

		.animated-bg {
			background-image: linear-gradient(to right,
					#f6f7f8 0%,
					#edeef1 10%,
					#f6f7f8 20%,
					#f6f7f8 100%);
			background-size: 200% 100%;
			animation: bgPos 1s linear infinite;
		}

		.animated-bg-text {
			border-radius: 5px;
			display: inline-block;
			margin: 0;
			height: 10px;
			width: 100%;
		}

		@keyframes bgPos {
			0% {
				background-position: 50% 0;
			}

			100% {
				background-position: -150% 0;
			}
		}

	}
</style>
